CSS Grids
CSS Grid is a powerful tool for creating two-dimensional layouts, providing developers with unmatched flexibility and control over web design structures.
What are CSS Grids?
CSS Grids are a layout system that divides a page into rows and columns, allowing for precise placement of items in a grid structure.
AiraCSS Framework includes a robust CSS grid system that empowers developers to create complex, responsive layouts with ease. Leveraging the power of CSS Grid, Astral allows you to design web pages that are both flexible and visually appealing.
Grid Template Column
| Class | Properties |
|---|---|
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); |
grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); |
grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); |
grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); |
grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)); |
grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); |
grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); |
grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); |
grid-cols-none | grid-template-columns: none; |
Use the grid-cols-{n} utilities to create grids with n equally sized columns.
1
2
3
4
5
6
7
8
9
Grid Column Start / End
Use this for controlling how elements are sized and placed across grid columns.
| Class | Properties |
|---|---|
col-auto | grid-column: auto; |
col-span-1 | grid-column: span 1 / span 1; |
col-span-2 | grid-column: span 2 / span 2; |
col-span-3 | grid-column: span 3 / span 3; |
col-span-4 | grid-column: span 4 / span 4; |
col-span-5 | grid-column: span 5 / span 5; |
col-span-6 | grid-column: span 6 / span 6; |
col-span-7 | grid-column: span 7 / span 7; |
col-span-8 | grid-column: span 8 / span 8; |
col-span-9 | grid-column: span 9 / span 9; |
col-span-10 | grid-column: span 10 / span 10; |
col-span-11 | grid-column: span 11 / span 11; |
col-span-12 | grid-column: span 12 / span 12; |
col-start-1 | grid-column-start: 1; |
col-start-2 | grid-column-start: 2; |
col-start-3 | grid-column-start: 3; |
col-start-4 | grid-column-start: 4; |
col-start-5 | grid-column-start: 5; |
col-start-6 | grid-column-start: 6; |
col-start-7 | grid-column-start: 7; |
col-start-8 | grid-column-start: 8; |
col-start-9 | grid-column-start: 9; |
col-start-10 | grid-column-start: 10; |
col-start-11 | grid-column-start: 11; |
col-start-12 | grid-column-start: 12; |
col-start-auto | grid-column-start: auto; |
col-end-1 | grid-column-end: 1; |
col-end-2 | grid-column-end: 2; |
col-end-3 | grid-column-end: 3; |
col-end-4 | grid-column-end: 4; |
col-end-5 | grid-column-end: 5; |
col-end-6 | grid-column-end: 6; |
col-end-7 | grid-column-end: 7; |
col-end-8 | grid-column-end: 8; |
col-end-9 | grid-column-end: 9; |
col-end-10 | grid-column-end: 10; |
col-end-11 | grid-column-end: 11; |
col-end-12 | grid-column-end: 12; |
col-end-auto | grid-column-end: auto; |
Spanning column
Use the col-span-{n} utilities to make an element span n columns.
Starting and ending line
Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the col-span-{n} utilities to span a specific number of columns.
Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.
Grid Template Rows
Use for specifying the rows in a grid layout..
| Class | Properties |
|---|---|
grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); |
grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); |
grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)); |
grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)); |
grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)); |
grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)); |
grid-rows-7 | grid-template-rows: repeat(7, minmax(0, 1fr)); |
grid-rows-8 | grid-template-rows: repeat(8, minmax(0, 1fr)); |
grid-rows-9 | grid-template-rows: repeat(9, minmax(0, 1fr)); |
grid-rows-10 | grid-template-rows: repeat(10, minmax(0, 1fr)); |
grid-rows-11 | grid-template-rows: repeat(11, minmax(0, 1fr)); |
grid-rows-12 | grid-template-rows: repeat(12, minmax(0, 1fr)); |
grid-rows-none | grid-template-rows: none; |
Use the grid-rows-{n} utilities to create grids with n equally sized rows.
1
2
3
4
5
6
7
8
9
Spanning row
Use the row-span-{n} utilities to make an element span n rows.
Starting and ending line
Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the row-span-{n} utilities to span a specific number of rows.
Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.
| Class | Properties |
|---|---|
gap-1 |
gap: .25rem |
gap-2 |
gap: .5rem |
gap-3 |
gap: .7rem |
gap-4 |
gap: 1rem |
gap-5 |
gap: 1.2rem |
gap-6 |
gap: 1.5rem |
Gap
Use gap-{size} to change the gutter size in grid layouts.
Row Gap
Use col-gap-{size} to change the gutter size between columns in grid layouts.
| Class | Properties |
|---|---|
row-gap-1 |
row-gap: .25rem |
row-gap-2 |
row-gap: .5rem |
row-gap-3 |
row-gap: .7rem |
row-gap-4 |
row-gap: 1rem |
row-gap-5 |
row-gap: 1.2rem |
row-gap-6 |
row-gap: 1.5rem |
Column Gap
Use col-gap-{size} to change the gutter size between columns in grid layouts.
| Class | Properties |
|---|---|
col-gap-1 |
column-gap: .25rem |
col-gap-2 |
column-gap: .5rem |
col-gap-3 |
column-gap: .7rem |
col-gap-4 |
column-gap: 1rem |
col-gap-5 |
column-gap: 1.2rem |
col-gap-6 |
column-gap: 1.5rem |
Grid Auto Flow
The grid-auto-flow property controls how the browser places items within a grid container that has not been explicitly placed. By default, the grid system lays out items in rows, but you can change this behavior to flow items in columns or rows based on your design needs.AiraCSS has some utilities classes you can use to achieve that.
| Class | Properties |
|---|---|
grid-flow-row |
grid-auto-flow: row; |
grid-flow-col |
grid-auto-flow: column; |
grid-flow-row-dense |
grid-auto-flow: row dense; |
grid-flow-row-dense |
grid-auto-flow: row dense; |
grid-flow-col-dense |
grid-auto-flow: column dense; |